<template>
	<div class="MerchantDetails">
		<!--		/**/-->
		<div class="head">
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage/details')">BACK</button>
			<div class="clear"></div>
			<div class="portrait"  :style="ground" @click="$router.push('/backstage/headimg')">
			</div>
			<div class="clear"></div>
		</div>
		<div class="body">
			<div class="input_margin">
				店名：
				<Input v-model="shop.name"/>
			</div>
			<div class="input_margin">
				店铺类型：
				<Input v-model="shop.type"/>
			</div>
			<div class="input_margin">
				区域：
				<Input v-model="shop.address"/>
			</div>
			<div class="input_margin">
				电话：
				<Input v-model="shop.phone"/>
			</div>
			<Button type="success" long @click="update()">保存修改</Button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "MerchantDetails",
		data() {
			return {
				shop_img:'default.png',
				ground:'',
				shop:{},
			}
		},
		methods:{
			async update(){
				let data = await this.$axios.post('Shop/index/update_shop',this.shop).then(r=>r.data)
				console.log(data)
				if (data.status){
					this.$Message.success('修改成功')
					return this.$router.push('/backstage/details')
				}
			}
		},
		async mounted(){
			let data = await this.$axios.post('Shop/index/details',this.$store.state.id).then(r=>r.data)
			this.shop_img = data['0'].shop_img
			this.shop = data['0']
			console.log(data['0'])
			this.ground='background:url("http://wsl/static/shop_img/'+this.shop_img+'") no-repeat ;background-size:100px 100px;'
		}
	}
</script>

<style lang="less">
	.MerchantDetails {
		max-width: 700px;
		margin: auto;
		.portrait {
			position: absolute;
			left: 50%; top: 60px;
			transform: translate(-50%, 0%);
			margin: 7px;
			height: 100px;
			width: 100px;
			border-radius: 50%;
			border: rgba(176, 193, 209) solid 4px;
			padding: 6px;
		}
		.clear {
			clear: both;
		}
		.head{
			min-height: 220px;
			width: 100%;
			background: url("../../assets/index.png");
		}
		.body{
			width: 100%;
			max-width: 700px;
			margin: auto;
			position: absolute;
			top:220px;
			bottom: 0;
			left: 0;right: 0;
			background: #c1bcc2;
			padding: 20px;
			font-size: 17px;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear {
			clear: both;
		}
		.btn1 {
			background: aliceblue;
			line-height: 22px;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: black;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.input_margin{
			margin-bottom: 10px;
			font-size: 18px;
		}
	}
</style>